<template>
  <div
    :class="{'mint-ui-refresh-container': true,'navigationbar': navigationbar,'tabbar': tabbar}"
    :style="{'top':offsetTop + (navigationbar ? 1.17 : 0) + 'rem','bottom':offsetBottom+ (tabbar ? 1.31 : 0) + 'rem'}"
    ref="wrapper"
  >
    <mt-loadmore
      :top-method="loadTop"
      :bottom-method="loadBottom"
      :bottom-all-loaded="allLoaded"
      ref="loadmore"
      :auto-fill="false"
      bottom-pull-text
    >
      <slot></slot>
    </mt-loadmore>
  </div>
</template>
<script>
import Vue from "vue";
import "mint-ui/lib/style.css";
import { Loadmore } from "mint-ui";
Vue.component(Loadmore.name, Loadmore);
export default {
  name: "refresh",
  data() {
    return {
      allLoaded: true //若数据已全部获取完毕
    };
  },
  props: {
    autoFill: {
      //是否自动填充
      type: Boolean,
      default: true
    },
    // ui相关
    offsetTop: {
      //顶部距离
      type: Number,
      default: 0
    },
    offsetBottom: {
      //底部距离
      type: Number,
      default: 0
    },
    navigationbar: {
      //是否有导航
      type: Boolean,
      default: true
    },
    tabbar: Boolean, //是否有tabbar
    topCallback: Function, //下拉刷新回调
    bottomCallback: Function //上拉加载回调
  },
  methods: {
    // 下拉刷新
    loadTop() {
      if (this.topCallback) {
        this.topCallback((allLoaded = false) => {
          this.allLoaded = allLoaded;
          this.$refs.loadmore.onTopLoaded();
          console.log(allLoaded)
        });
      } else {
        setTimeout(() => {
          this.$refs.loadmore.onTopLoaded();
        }, 1000);
      }
    },
    // 上垃加载
    loadBottom() {
      console.log('hhh')
      if (this.bottomCallback) {
        this.bottomCallback((allLoaded = false) => {
          this.allLoaded = allLoaded;
          this.$refs.loadmore.onBottomLoaded();
        });
      } else {
        setTimeout(() => {
          this.$refs.loadmore.onBottomLoaded();
        }, 1000);
      }
    }
  },
  mounted() {
    if (this.autoFill) this.loadTop();
  }
};
</script>
<style scoped>
.mint-ui-refresh-container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  overflow: scroll;
}
</style>
